/*----------------------------------------*\
  HERO
\*----------------------------------------*/

.hero {
  @apply container--pb;
  @apply pt-12 lg:pt-14 3xl:pt-20;

  figure {
    @apply py-0;
  }
}

.hero__content {
  @apply space-y-6 lg:space-y-8 3xl:space-y-10;
}

.hero__title {
  @apply break-words;
  @apply text--3xl font-bold;
  @apply leading-tight;
}

.hero__subtitle {
  @apply break-words;
  @apply text--xl font-bold;
  @apply leading-tight;
}

.hero__description {
  @apply break-words;
  @apply text--lg;
  @apply leading-snug;
}

.hero__cta .btn {
  @apply mr-4 md:mr-5 xl:mr-6;
  @apply mb-4 md:mb-5 xl:mb-6;
}

.hero__image {
  @apply block relative;
  @apply overflow-hidden;
  @apply w-full;

  img {
    @apply w-full;
  }
}

.hero--default {
  .hero__content {
    @apply container__center--sm;
  }

  .hero__image {
    @apply container__center--md;

    img {
      @apply m-auto;
    }
  }
}

.hero--title-only {
  @apply container--pb-half;

  .hero__content {
    @apply container__center--xs;
  }
}

.hero--main-image {
  @apply container--py;

  .hero__content {
    @apply col-span-12;
    @apply md:col-span-6;
    @apply flex flex-col h-full justify-center;
  }

  .hero__title {
    @apply text--3xl;
  }

  .hero__image {
    @apply col-span-12;
    @apply md:col-span-6;
  }
}

.hero--main {
  @apply py-20 lg:py-32 3xl:py-40;

  .hero__content {
    @apply col-span-12;
    @apply md:col-span-10;
    @apply lg:col-span-8;
    @apply flex flex-col h-full justify-center;
  }

  .hero__title {
    @apply text--4xl;
  }

  .hero__image {
    @apply col-span-12;
    @apply md:col-span-6;
  }
}

.hero--hub {
  @apply pb-16 md:pb-16 3xl:pb-28;

  .hero__content {
    @apply col-span-12;
    @apply md:col-span-10;
    @apply lg:col-span-8;
  }

  .hero__title {
    @apply order-1;
  }

  .hero__description {
    @apply order-2;
  }

  .hero__image {
    @apply container__aside;
  }
}

.hero--overview {
  @apply pb-16 md:pb-16 3xl:pb-28;

  .hero__content {
    @apply col-span-12;
    @apply md:col-span-10;
    @apply lg:col-span-8;
  }

  .hero__title {
    @apply order-1;
    @apply !mb-0;
  }

  .hero__description {
    @apply order-2;
  }

  .hero__image {
    @apply container__aside;
  }
}
